<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <!--

    后代选择器:
       ul li {
            color: red;
        }
        只要标签为li并且是ul的后代,就会被选择

        不仅可以用标签的后代,也可以使用类选择器,id选择器的后代
        也就是说,不管是元素选择器,类选择器,id选择器,交集选择器和并集选择器都可以作为后代选择器的组合条件


    -->
    <style>
        ul li {
            color: red;
        }

        ol li {
            color: green;
        }

        ul li a {
            color: blue;
        }

        ol a {
            color: gold;
        }

        #web_font .base {
            color: black;
        }
    </style>
</head>
<body>
<ul>
    <!--    这里的li是ul的后代元素-->
    <li>抽烟</li>
    <li>喝酒</li>
    <!--    这里的a是li的后代元素,也是ul的后代元素 可以携程ul li a 也可以写成li a 还可以写成ul a-->
    <li><a href="#">烫头</a></li>
</ul>

<ol>
    <li>张三</li>
    <li>李四</li>
    <li><a href="#">王五</a></li>
</ol>

<span>前端技术栈</span>
<ul id="web_font">
    <li class="base">HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</body>
</html>